<script lang="ts" setup>
/**
 * Props
 * @color 按钮颜色
 *
 * @size 按钮尺寸 --L | B | N | M | S
 * 默认 M
 *
 * @width 按钮宽度 优先于size
 *
 * @height 按钮高度 优先于size
 *
 * @type 按钮类型 --primary | solid | text
 * 默认 primary
 *
 * @disabled 禁用
 * 默认 false
 *
 * @styles 自定义样式
 *
 * Slot 内容区域
 */
import { debounceImmediate, hasUnit } from '@U/common'
import type { PropType } from '@/interface'

defineProps({
  color: {
    type: String,
    required: false,
    default: '',
  },
  size: {
    type: String as PropType<'L' | 'B' | 'N' | 'M' | 'S'>,
    required: false,
    default: 'M',
  },
  width: {
    type: String,
    required: false,
    default: '',
  },
  height: {
    type: String,
    required: false,
    default: '',
  },
  type: {
    type: String as PropType<'primary' | 'solid' | 'text'>,
    required: false,
    default: 'primary',
  },
  disabled: {
    type: Boolean,
    required: false,
    default: false,
  },
  styles: {
    type: Object,
    required: false,
    default: () => ({}),
  },
})

// 大小
const isSize = (t: 'L' | 'B' | 'N' | 'M' | 'S') => {
  switch (t) {
    case 'L': return { width: '690rpx', height: '80rpx', fontSize: '36rpx', borderRadius: '47rpx' }
    case 'B': return { width: '340rpx', height: '80rpx', fontSize: '36rpx', borderRadius: '47rpx' }
    case 'N': return { width: '320rpx', height: '80rpx', fontSize: '36rpx', borderRadius: '47rpx' }
    case 'M': return { width: '184rpx', height: '64rpx', fontSize: '28rpx', borderRadius: '30rpx' }
    case 'S': return { width: '120rpx', height: '48rpx', fontSize: '24rpx', borderRadius: '30rpx' }
  }
}

// 样式
const isStyle = (t: 'primary' | 'solid' | 'text', c: string) => {
  switch (t) {
    case 'primary': return { background: c || '#1890FF', color: '#ffffff' }
    case 'solid': return { background: '#ffffff', color: c || '#1890FF', border: `2rpx solid ${c || '#1890FF'}` }
    case 'text': return { color: c || '#1890FF' }
    default: return { background: c || '#1890FF', color: '#ffffff' }
  }
}
const emit = defineEmits(['confirm'])
// 按钮统一做防抖
const confirmFn = debounceImmediate(() => emit('confirm'))
</script>

<template>
  <div
    :class="{'prm-button-disabled': disabled}"
    :style="{
      ...isSize(size),
      ...isStyle(type, color),
      ...(
        width
          ? { width: hasUnit(width) }
          : {}
      ),
      ...(
        height
          ? { height: hasUnit(height) }
          : {}
      ),
      ...styles
    }"
    class="prm-button-box"
    @tap="confirmFn"
  >
    <slot />
  </div>
</template>

<style lang="less" scoped>
.prm-button-box {
  display: flex;
  justify-content: center;
  background: transparent;
  align-items: center;
  overflow: hidden;
  transition: all .3s;
  &:active {
    filter: brightness(0.8) contrast(80%);
  }
}
.prm-button-disabled {
  opacity: 0.65;
  &:active {
    filter: none;
  }
}
</style>
